<template>
  <div class="mod-menu">
    <el-form :inline="true" :model="pamars">
      <el-form-item label="单品名称">
        <el-input v-model="pamars.single_goods_title" placeholder="单品名称" clearable></el-input>
      </el-form-item>
      <el-form-item label="单品编号">
        <el-input v-model="pamars.single_goods_code" placeholder="单品编号" clearable></el-input>
      </el-form-item>
      <el-form-item label="出库类型">
        <el-select v-model="pamars.stock_change_mode" clearable placeholder="请选择">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>

      </el-form-item>
      <el-form-item label="操作类型" v-if="pamars.stock_change_mode">
        <el-select v-model="pamars.in_stock_type" clearable placeholder="请选择" v-if="pamars.stock_change_mode==0 || pamars.stock_change_mode==null">
          <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
        <el-select v-model="pamars.out_stock_type" clearable placeholder="请选择" v-if="pamars.stock_change_mode==1">
          <el-option v-for="item in options3" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button @click="getDataList()">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="dataList" row-key="Id" border style="width: 100%; ">
      <el-table-column prop="cover_image" align="center" label="单品图片">
        <template slot-scope="scope">
          　　　　<el-popover placement="top-start" trigger="hover">
            <a :href="scope.row.cover_image" target="_blank" title="查看最大化图片"><img :src="scope.row.cover_image" style="width: 300px;height: 300px" /></a>
            <img slot="reference" @click="$openImg(scope.row.cover_image)" :src="scope.row.cover_image" style="width: 50px;height: 50px; cursor:pointer" />
          </el-popover>
          <div>{{scope.row.single_goods_title}}</div>
          　　
        </template>
      </el-table-column>
      <el-table-column prop="single_goods_code" align="center" label="单品编号">
      </el-table-column>
      <el-table-column align="center" label="单号">
        <template slot-scope="scope">
          <div v-if="scope.row.in_stock_type==3">{{scope.row.rights_code}}</div>
          <div v-else>{{scope.row.order_code}}</div>
        </template>
      </el-table-column>
      <el-table-column prop="stock_change_mode" align="center" :formatter="stockChangeMode" label="库存类型">
        <template slot-scope="scope">
          <div v-if="scope.row.stock_change_mode==0">入库</div>
          <div v-else>出库</div>
        </template>
      </el-table-column>
      <el-table-column prop="stock_type_str" align="center" label="操作类型">
      </el-table-column>
      <el-table-column prop="stock_start_num" align="center" label="初始库存">
      </el-table-column>
      <el-table-column prop="stock_change_num" align="center" label="变更数量">
      </el-table-column>
      <el-table-column prop="stock_end_num" align="center" label="当前库存">
      </el-table-column>
      <el-table-column prop="remark" align="center" label="备注">
      </el-table-column>
    </el-table>
    <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pamars.page" :page-sizes="[10, 20, 50, 100]" :page-size="pamars.limit" :total="totalPage" layout="total, sizes, prev, pager, next, jumper"></el-pagination>
  </div>
</template>

<script>
import seviceApi from '@/api/serviceApi.js'
export default {
  data () {
    return {
      dataForm: {},
      pamars: {
        page: 1,
        limit: 10,
        single_goods_title: null,
        single_goods_code: null,
        stock_change_mode: null,
        in_stock_type: null,
        out_stock_type: null
      },
      totalPage: 0,
      dataList: [],
      options: [{
        value: '0',
        label: '入库'
      }, {
        value: '1',
        label: '出库'
      }],
      options2: [{
        value: '1',
        label: '初始化库存'
      }, {
        value: '2',
        label: '手动入库'
      }, {
        value: '3',
        label: '维权入库'
      }, {
        value: '4',
        label: '撤单入库'
      }, {
        value: '5',
        label: '支付过期入库'
      }
        // {
        //       value: '6',
        //       label: '自提过期'
        //       },{
        //       value: '7',
        //       label: '支付成功,条件不允许,自动退款关闭'
        //       }
      ],
      options3: [{
        value: '1',
        label: '下单出库'
      }, {
        value: '2',
        label: '手动出库'
      }],
      dataListLoading: false
    }
  },
  components: {},
  mounted () {
    this.getList()
  },
  methods: {
    // 获取列表
    getList () {
      seviceApi.getStockrecordList(this.pamars).then(res => {
        if (res && res.data.code == 200) {
          this.dataList = res.data.page.list
          this.totalPage = res.data.page.totalCount
        }
      })
    },
    // 库存类型
    stockChangeMode (row, column) {
      let status = row.stock_change_mode
      if (status === 0) {
        return '入库'
      } else {
        return '出库'
      }
    },
    // 操作类型
    inStockType (row, column) {
      let status = row.in_stock_type
      if (status === 1) {
        return '初始化库存'
      } else if (status === 2) {
        return '手动入库'
      } else if (status === 3) {
        return '维权入库'
      } else if (status === 4) {
        return '撤单入库'
      } else if (status === 5) {
        return '支付过期入库'
      } else if (status === 6) {
        return '自提过期'
      } else if (status === 7) {
        return '支付成功,条件不允许,自动退款关闭'
      }
    },
    // 每页数
    sizeChangeHandle (val) {
      this.pamars.limit = val
      this.getList()
    },
    // 当前页
    currentChangeHandle (val) {
      this.pamars.page = val
      this.getList()
    },
    // 查询
    getDataList () {
      this.pamars.page = 1
      this.getList()
    }

  }
}
</script>
